<template>
  <div class="container">
    <headComponent></headComponent>
    <div class="row">
      <div class="col-xs-1"></div>
      <div class="col-xs-10" style="width: 902px;height: 600px;">
        <div style="margin-top:40px; margin-bottom:5px; font-size:15px; font-weight:600;">
          <span class="glyphicon glyphicon-send"></span>&nbsp;&nbsp; 我的账号
        </div>

        <div class="row" style="border: 1px #F0F0F2 solid">
          <div class="col-xs-1 text-center" style="margin-top: 20px">
            <span class="glyphicon glyphicon-list-alt" style="font-size: 40px;color: #5C5C5C"></span>
          </div>
          <div class="col-xs-3" style="margin-top: 30px">
            <p style="font-size: 20px;font-weight: bold">基本信息</p>
          </div>
          <div class="col-xs-6 text-right" style="margin-top: 30px;padding-right: 0px ">
            <p style="font-size: 20px;font-weight: bold">账户类型:</p>
          </div>
          <div class="col-xs-2" style="margin-top: 30px">
            <p style="font-size: 20px;font-weight: bold">管理员</p>
          </div>
        </div>
        <div class="row" style="border: 1px #DEDEDF solid"></div>
        <div class="row" style="margin-top: 20px">
          <div class="col-xs-12">
            <!--          <table class="table table-striped">-->
            <!--            <tbody>-->
            <!--            <tr>-->
            <!--              <td>Tanmay</td>-->
            <!--              <td>Bangalore</td>-->
            <!--              <td>560001</td>-->
            <!--            </tr>-->
            <!--            <tr>-->
            <!--              <td>Sachin</td>-->
            <!--              <td>Mumbai</td>-->
            <!--              <td>400003</td>-->
            <!--            </tr>-->
            <!--            <tr>-->
            <!--              <td>Uma</td>-->
            <!--              <td>Pune</td>-->
            <!--              <td>411027</td>-->
            <!--            </tr>-->
            <!--            </tbody>-->
            <!--          </table>-->

            <ul class="table table-striped" style="font-size: 25px">
              <li>
                <span style="font-weight: bold">姓名</span>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span style="margin-top: 30px">张熔城</span>
              </li>
              <li style="background-color: white">
                <span style="font-weight: bold">学号</span>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span> 211806360</span>
              </li>
              <li>
                <span style="font-weight: bold">联系电话</span>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span> 177****5648</span>
              </li>
              <li><span style="font-weight: bold">专业系别班级</span>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span> 计算机系-软件工程-1班</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="row" style="border: 1px #F0F0F2 solid">

          <div class="col-xs-1 text-center" style="margin-top: 20px">
            <span class="glyphicon glyphicon-list-alt" style="font-size: 40px;color: #5C5C5C"></span>
          </div>
          <div class="col-xs-3" style="margin-top: 30px">
            <p style="font-size: 20px;font-weight: bold">考核信息</p>
          </div>
        </div>

        <div class="row" style="border: 1px #DEDEDF solid"></div>
        <ul class="table table-striped" style="font-size: 25px">
          <li>
            <span style="font-weight: bold">考核分</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span>0</span>

            <button class="btn btn-default btn-lg pull-right" data-toggle="modal" data-target="#myModal" style="font-size: 10px">
              更多>>
            </button>
            <!-- 模态框（Modal） -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog modal-lg">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" style="font-size: 20px" aria-hidden="true">
                      &times;
                    </button>

                  </div>
                  <div class="modal-body">
                    <div class="text-center">
                      <h2 class="modal-title" id="myModalLabel" style="font-weight: bold">
                        --考核分记录--
                      </h2>
                    </div>
                    <div style="margin-top: 20px">
                      <table class="table table-bordered" style="font-size: 15px">
                        <thead>
                        <tr>
                          <th>时间</th>
                          <th>备注</th>
                          <th>分数</th>
                          <th>总分数</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                          <td>2020-10-15</td>
                          <td></td>
                          <td>0</td>
                          <td>0</td>
                        </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <div class="btn-group">
                      <button type="button" class="btn btn-default">上一页</button>
                      <button type="button" class="btn btn-default">下一页</button>
                    </div>
                  </div>
                </div><!-- /.modal-content -->
              </div><!-- /.modal -->
            </div>
          </li>
        </ul>

        <div class="row" style="margin-top: 15px;border: 1px #F0F0F2 solid">

          <div class="col-xs-1 text-center" style="margin-top: 20px">
            <span class="glyphicon glyphicon-list-alt" style="font-size: 40px;color: #5C5C5C"></span>
          </div>
          <div class="col-xs-3" style="margin-top: 30px">
            <p style="font-size: 20px;font-weight: bold">账号信息</p>
          </div>
        </div>
        <div class="row" style="border: 1px #DEDEDF solid"></div>
        <ul class="table table-striped" style="font-size: 25px">
          <li>
            <span style="font-weight: bold">账号</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span>211806360</span>
          </li>
          <li>
            <span style="font-weight: bold">密码</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span>*******</span>
            <button class="btn btn-default btn-lg pull-right" data-toggle="modal" data-target="#passwordModal" style="font-size: 10px">
              修改密码>>
            </button>
            <!-- 模态框（Modal） -->
            <div class="modal fade" id="passwordModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog modal-lg">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" style="font-size: 20px" aria-hidden="true">
                      &times;
                    </button>

                  </div>
                  <div class="modal-body">
                    <div class="text-center">
                      <h2 class="modal-title" id="passwordModalLabel" style="font-weight: bold">
                        --修改密码--
                      </h2>
                    </div>
                    <div>
                      <div class="row" style="margin-top: 30px">
                        <div class="col-xs-4 text-right">
                          旧密码:
                        </div>
                        <div class="col-xs-8">
                          <input v-model="oldpassword" type="text" placeholder="请输入旧密码" style="height: 30px;margin-top: 5px">
                        </div>
                      </div>
                      <div class="row" style="margin-top: 30px">
                        <div class="col-xs-4 text-right">
                          新密码:
                        </div>
                        <div class="col-xs-8">
                          <input v-model="newpassword" type="text" placeholder="请输入新密码" style="height: 30px;margin-top: 5px">
                        </div>
                      </div>
                      <div class="row" style="margin-top: 30px">
                        <div class="col-xs-4 text-right">
                          确认密码:
                        </div>
                        <div class="col-xs-8">
                          <input v-model="renewpassword" type="text" placeholder="请再输入一次新密码" style="height: 30px;margin-top: 5px">
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="modal-footer" style="margin-top: 30px">
                    <div class="row">
                      <div class="col-xs-6">
                        <button v-on:click="myAccountReset" type="button" class="btn btn-danger" style="font-size: 20px">重   置</button>
                      </div>
                      <div class="col-xs-6">
                        <button v-on:click="myAccountConfirm" type="button" class="btn btn-success" style="font-size: 20px">确认修改</button>
                      </div>

                    </div>
                  </div>
                </div><!-- /.modal-content -->
              </div><!-- /.modal -->
            </div>
          </li>
        </ul>

      </div>
    </div>
  </div>


</template>

<script>
  export default {
    name: "myAccount",
    data(){
      return{
        oldpassword:'',
        newpassword:'',
        renewpassword:''
      }
    },
    methods:{
      myAccountConfirm:function () {
        if (this.oldpassword==''){
          alert('请输入旧密码');
          return;
        }
        if (this.newpassword==''){
          alert('请输入新密码');
          return;
        }
        if (this.newpassword.length<6){
          alert('新密码不能小于6位');
          return;
        }
        if (this.newpassword>16){
          alert('新密码不能大于16位');
          return;
        }
        if (this.renewpassword==''){
          alert('请再次输入密码');
          return;
        }
        if (this.newpassword!=this.renewpassword){
          alert('两次密码不一致');
          this.renewpassword='';
          return;
        }
      },
      myAccountReset:function() {
        this.oldpassword='';
        this.newpassword='';
        this.renewpassword='';
      }
    }
  }
</script>

<style scoped>

</style>
